<!--
 作者 : 唐梓元
 日期 : 2019-7-15
 版本 : 1.0
 描述 :管理页面左边导航
 使用 : <entranceLeftNav :leftNav="leftNav"></entranceLeftNav>
 参数 :leftNav 为父组件传过来的表格数据
 -->
<template>
  <div class="leftNav">
    <ul>
      <li class="" v-for="(item,index) in leftNav" :key=" index" @click="do_selectNav(item,index)" :class="activeIndex==index?'isActive':''">
        <span class="f "> <span :class="`iconfont icon-${item.icon}`"></span >{{item.title}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
    export default {
        name: "cm_entranceLeftNav",
      props:{
          leftNav:Array
      },
      data(){
          return{
            activeIndex:''
          }
      },
      methods:{
        do_selectNav(item,index){
          this.activeIndex=index
          this.$emit("leftNav",index)
        }
      }
    }
</script>

<style scoped>

  .leftNav ul li{
    width: 220px;
    height: 40px;
    line-height: 40px;
    /*border: 1px solid ;*/
    cursor: pointer;
    color: #A6A6A6;
    padding-left: 25px;
  }
  .iconfont{
    font-size: 22px;
    margin-right: 5px;
  }
  .icon-CombinedShape{
    font-size: 19px;
    margin-right: 7px;
  }
  .isActive{
    background-color: #D6E6FF;
    border-right: 2px solid #408DFE;

  }
  .isActive .iconfont,  .isActive span{
    color: #408DFE;
  }
</style>
